<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/ajax-day02/js/vue-2.6.12.js"></script>
    <script type="text/javascript" src="/ajax-day02/js/myajax.js"></script>
    <script type="text/javascript" src="/ajax-day02/js/axios-0.21.0.js"></script>
    <script type="text/javascript" src="/ajax-day02/js/qs-6.9.4.js"></script>
</head>
<body>
<div id="app">
    <h2>{{msg}}</h2>
    <form action="" @submit.prevent="login">
       用户名: <input type="text" v-model="username"><br>
        密码:<input type="password" v-model="password"><br>
        <input type="submit" value="登录"><br>
    </form>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            username:"",
            password:"",
            msg:""
        },
        methods:{
            login(){
                //发起ajax请求
                /*
                let url ="/ajax-day02/login";
                let data = `username=${this.username}&password=${this.password}`;
                let type = "post";
                myAjax(url,data,type,result=>{
                    console.log(result);
                    let data = JSON.parse(result);
                    console.log(data);
                    console.log(typeof result);
                    console.log(typeof data);

                    if (data.status == "success") {
                        location.href = "/ajax-day02/book/show.html";
                    }else{
                        this.msg = data.msg;
                    }
                })*/

                //axios({
                    /*
                    method:"get",
                    url:"/ajax-day02/login",
                    params:{
                        username:this.username,
                        password:this.password
                    }*/
                  /*  method:"post",
                    url:"/ajax-day02/login",
                    data:Qs.stringify({
                        username:this.username,
                        password:this.password
                    })
                }).then(resp=>{
                    console.log(resp);
                    console.log(resp.data);
                    console.log(typeof resp.data);

                    if (resp.data.status == "success") {
                        location.href = "/ajax-day02/book/show.html";
                    }else{
                        this.msg = resp.data.msg;
                    }

                }).catch(error=>{
                    console.log(error);
                })
                   */
                /*
                axios.get("/ajax-day02/login",{
                    params:{
                        username:this.username,
                        password:this.password
                    }
                }).then(resp=>{
                        console.log(resp);
                        console.log(resp.data);
                        console.log(typeof resp.data);

                        if (resp.data.status == "success") {
                            location.href = "/ajax-day02/book/show.html";
                        }else{
                            this.msg = resp.data.msg;
                        }

                    }).catch(error=>{
                    console.log(error);
                })
                */
                axios.post("/ajax-day02/login",Qs.stringify({
                    username:this.username,
                    password:this.password
                })).then(resp=>{
                    console.log(resp);
                    console.log(resp.data);
                    console.log(typeof resp.data);

                    if (resp.data.status == "success") {
                        location.href = "/ajax-day02/book/show.html";
                    }else{
                        this.msg = resp.data.msg;
                    }

                }).catch(error=>{
                    console.log(error);
                })
            }
        }
    })
</script>
</body>
</html>